<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>美多商城-注册</title>
	<link rel="stylesheet" type="text/css" href="../static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../static/css/main.css">
    <script src="../static/js/vue-2.5.16.js"></script>
    <script src="../static/js/axios-0.18.0.min.js"></script>
    <script src="../static/js/common.js"></script>
</head>
<body>
    <div id="app">
        <div class="register_con">
            <div class="l_con fl">
                <a href="/" class="reg_logo"><img src="../static/images/logo.png"></a>
                <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
                <div class="reg_banner"></div>
            </div>
            <div class="r_con fr">
                <div class="reg_title clearfix">
                    <h1>用户注册</h1>
                    <a href="login.html">登录</a>
                </div>
                <div class="reg_form clearfix">
                    <form autocomplete="off" action="{% url 'registered' %}" method="post" class="register_form" @submit="on_submit" v-cloak>
                        {% csrf_token %}
                        {{ form }}
                        <ul>
                            <li>
                                <label>用户名:</label>
                                <input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
                                <span class="error_tip" v-show="error_name">[[ error_name_message ]]</span>
                            </li>
                            <li>
                                <label>密码:</label>
                                <input type="password" v-model="password" @blur="check_password" name="password" id="pwd">
                                <span class="error_tip" v-show="error_password">请输入8-20位的密码</span>
                            </li>
                            <li>
                                <label>确认密码:</label>
                                <input type="password" v-model="password2" @blur="check_password2" name="password2" id="cpwd">
                                <span class="error_tip" v-show="error_password2">两次输入的密码不一致</span>
                            </li>
                            <li>
                                <label>手机号:</label>
                                <input type="text" v-model="mobile" @blur="check_mobile" name="mobile" id="phone">
                                <span class="error_tip" v-show="error_mobile">[[ error_mobile_message ]]</span>
                            </li>
                            <li>
                                <label>图形验证码:</label>
                                <input type="text" v-model="image_code" @change="check_image_code" name="image_code" id="pic_code" class="msg_input">
                                <img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code">
                                <span class="error_tip" v-show="error_image_code">[[ error_image_code_message ]]</span>
                            </li>
                            <li class="agreement">
                                <input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow">
                                <label>同意”美多商城用户使用协议“</label>
                                <span class="error_tip" v-show="error_allow">请勾选用户协议</span>
                                {% if register_errmsg %}
                                    <span class="error_tip">{{ register_errmsg }}</span>
                                {% endif %}
                            </li>
                            <li class="reg_sub">
                                <input type="submit" value="注 册">
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
        <div class="footer no-mp">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>
            </div>
            <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
            <p>电话：010-****888    京ICP备*******8号</p>
        </div>
    </div>
    <script>
        //创建vue对象
let vm = new Vue({
    el: '#app',
    delimiters: ['[[',']]'],
    data: { //数据对象
        //v-model
        username: null,
        password: null,
        password2: '',
        mobile: '',
        allow: '',
        image_code_url: '',
        uuid: '',
        image_code: '',
        //v-show
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,

        //error
        error_name_message: '',
        error_mobile_message: '',
        error_image_code_message: '',
    },
    mounted(){
        // 生成图片验证码
        this.generate_image_code()
    },
    methods: {
        // 生成图片验证码
        generate_image_code(){
            console.log(11)
            this.uuid = generateUUID();
            this.image_code_url = '/verifications/' + this.uuid + '/get_img_code/';
        },
        //校验验证码
        check_image_code(){
            if(this.image_code.length != 4){
                this.error_image_code = true;
                this.error_image_code_message = '请输入正确的验证码'
            }else{
                this.error_image_code = false;
            }
        },
        //校验用户名
        check_username() {
            // 用户名是5-20个字符，[a-zA-Z0-9_-]
            // 定义正则
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            // 使用正则匹配用户名数据
            if (re.test(this.username)) {
                // 匹配成功，不展示错误提示信息
                this.error_name = false;
            } else {
                // 匹配失败，展示错误提示信息
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }

            // 判断用户名是否重复注册
            if (this.error_name == false) {
                let url = '/users/' + this.username + '/count/';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count == 1) {
                            // 用户名已存在
                            this.error_name_message = '用户名已存在';
                            this.error_name = true;
                        } else {
                            // 用户名不存在
                            this.error_name = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    })
            }
        },
        //校验密码
        check_password(){
            let re = /^[0-9A-Za-z]{8,20}$/;
            if (re.test(this.password)) {
                this.error_password = false;
            } else {
                this.error_password = true;
            }
        },
        //校验重复密码
        check_password2(){
            if (this.password != this.password2) {
                this.error_password2 = true;
            } else {
                this.error_password2 = false;
            }
        },
        //校验手机密码
        check_mobile(){
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)) {
                this.error_mobile = false;
            } else {
                this.error_mobile_message = '您输入的手机号格式不正确';
                this.error_mobile = true;
            }
            // 判断手机号是否重复注册error_mobile
            if (this.error_mobile == false) {
                let url = '/users/' + this.mobile + '/count_moblie/';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count == 1) {
                            // 用户名已存在
                            this.error_mobile_message = '手机号已存在';
                            this.error_mobile = true;
                        } else {
                            // 用户名不存在
                            this.error_mobile = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    })
            }
        },
        //是否勾选协议
        check_allow(){
            if (!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        //监听表单事件
        on_submit(){
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();

            // 在校验之后，注册数据中，只要有错误，就禁用掉表单的提交事件
            if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_allow == true) {
                // 禁用掉表单的提交事件
                window.event.returnValue = false;
            }
        }
    }
});
    </script>
</body>
</html>